import 'package:flutter/material.dart';

class SliderView extends StatefulWidget {
  final List<Color> colors;
  final double min;
  final double max;
  final double value;
  final ValueChanged<double>? onChanged;
  final ValueChanged<double>? onChangedEnd;

  const SliderView({
    super.key,
    required this.colors,
    this.min = 0.0,
    this.max = 100.0,
    this.value = 0.0,
    this.onChanged,
    this.onChangedEnd,
  });

  @override
  State<SliderView> createState() => _SliderViewState();
}

class _SliderViewState extends State<SliderView> {
  double sliderPosition = 0.0;
  double sliderWidth = 20.0;
  double _containerWidth = 0.0;
  double _dragOffsetX = 0.0;

  void _onDragUpdate(double dx, bool end) {
    setState(() {
      final maxPosition = _containerWidth - sliderWidth;
      sliderPosition = dx.clamp(0.0, maxPosition);
      final currentValue = _positionToValue(sliderPosition, _containerWidth);
      if (end) {
        widget.onChangedEnd?.call(currentValue);
      } else {
        widget.onChanged?.call(currentValue);
      }
    });
  }

  double _positionToValue(double position, double width) {
    final maxPosition = width - sliderWidth;
    if (maxPosition <= 0) return widget.min;
    final ratio = position / maxPosition;
    return widget.min + (widget.max - widget.min) * ratio;
  }

  double _valueToPosition(double value, double width) {
    final maxPosition = width - sliderWidth;
    if (widget.max == widget.min) return 0;
    final ratio = (value - widget.min) / (widget.max - widget.min);
// final ratio = ((value <= widget.min) ? 0 : (value >= widget.max) ? 100 : value)* 0.01;
    return ratio * maxPosition;
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      _containerWidth = constraints.maxWidth;
      sliderPosition = _valueToPosition(widget.value, _containerWidth);
      return SizedBox(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        child: Stack(
          children: [
            // 背景轨道
            Center(
              child: GestureDetector(
                onTapDown: (detail) => _onDragUpdate(detail.localPosition.dx, false),
                onHorizontalDragStart: (detail) => _dragOffsetX = detail.localPosition.dx,
                onHorizontalDragUpdate: (detail) => _onDragUpdate(detail.localPosition.dx, false),
                onHorizontalDragEnd: (details) => _onDragUpdate(details.localPosition.dx, true),
                child: Container(
                  height: constraints.maxHeight - 20,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    gradient: LinearGradient(
                      colors: widget.colors,
                      stops: const [0.0, 0.9],
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                    ),
                  ),
                ),
              ),
            ),
            // 滑块
            Positioned(
              left: sliderPosition,
              child: IgnorePointer(
                ignoring: true,
                child: Container(
                  width: sliderWidth,
                  height: constraints.maxHeight,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: const Color(0xFF323232), width: 0.5),
                  ),
                ),
              ),
            ),
          ],
        ),
      );
    });
  }
}
